<template>
  <div>
    <div class="panel">
      <panel-title title="舆情详情"></panel-title>
      <div class="panel-body">
        <div style="text-align: center;margin-bottom: 10px">
          <h2>{{data.hotWord}}</h2>
          <span>{{dateFormat(data.crawlDate)}}</span>
          <el-tag>{{data.type}}</el-tag>
          <span v-if="data.tag!=null&& data.tag.length>=1">
            <el-tag v-for="(tag, i) in data.tag.split(',')" :key="i" type="warning">{{tag}}</el-tag>
          </span>
        </div>

        <el-row :gutter="20">
          <el-col :span="8" v-for="(article,index) in data.articles" :key="index" style=";margin-bottom: 20px">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-button type="text"
                           style="cursor: pointer"
                           @click="jumpToDetail(article.articleId)"
                >热门文章{{index}}
                </el-button>
                <el-dropdown trigger="click" style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item class="clearfix">
                      评论
                      <el-badge class="mark" :value="article.commentCount"/>
                    </el-dropdown-item>
                    <el-dropdown-item class="clearfix">
                      转发
                      <el-badge class="mark" :value="article.repostCount"/>
                    </el-dropdown-item>
                    <el-dropdown-item class="clearfix">
                      点赞
                      <el-badge class="mark" :value="article.likeCount"/>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div style="overflow: auto;height: 80px">
                {{article.textContent}}
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row
      :gutter="20"
    >
      <el-col :span="12">
        <!--性别分布图-->
        <div class="panel">
          <panel-title title="性别比例饼图"></panel-title>
          <div class="panel-body" style="height: 440px">
            <sex-pie-chart :key="'sex'" v-if="sexPieData.length>0" :sexPieData="sexPieData"></sex-pie-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!--受众地图分布-->
        <div class="panel">
          <panel-title title="受众分布地图"></panel-title>
          <div class="panel-body" style="height: 440px">
            <address-chart
              v-if="addressData.length>0"
              :addressData="addressData"></address-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!--观点分布图-->
        <div class="panel">
          <panel-title title="观点饼图"></panel-title>
          <div class="panel-body" style="height: 440px">
            <sex-pie-chart :key="'comment'" v-if="commentData.length>0 " :sexPieData="commentData"></sex-pie-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!--观点分布图-->
        <div class="panel">
          <panel-title title="态度偏向柱状图"></panel-title>
          <div class="panel-body" style="height: 440px">
            <bar-chart v-if="sentimentData.length>0" :barData="sentimentData"></bar-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <!--关键词地图分布-->
        <div class="panel">
          <panel-title title="话题标签"></panel-title>
          <div class="panel-body">
            <word-cloud-chart :key="'keyword'" v-if="keywordData.length>0 "
                              :wordCloudData="keywordData"></word-cloud-chart>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {panelTitle} from 'components'
  import sexPieChart from '../../components/chart/sexPieChart'
  import addressChart from '../../components/chart/addressChart'
  import wordCloudChart from '../../components/chart/wordCloudChart'
  import barChart from '../../components/chart/barChart'
  import moment from 'moment'


  export default {
    name: 'consensusDetail',
    data() {
      return {
        id: null,
        data: {
          id: null,
          hotWord: null,
          hotIndex: null,
          crawlDate: null,
          type: null,
          tag: null,
          url: null,
          articles: [{
            articleId: null,
            commentCount: null,
            id: null,
            likeCount: null,
            repostCount: null,
            textContent: null,
          }],
        },
        sexPieData: [],
        addressData: [],
        keywordData: [],
        commentData: [],
        sentimentData: [],
      }
    },
    components: {
      panelTitle,
      wordCloudChart,
      sexPieChart,
      addressChart,
      barChart

    },
    created() {
      this.getTopicWithArticleById()
    },
    computed: {
      articleIds: function () {
        var articleIds = [];
        for (var index in this.data.articles) {
          articleIds.push(this.data.articles[index].articleId)
        }
        return articleIds.map(Number)
      }
    },
    methods: {
      getTopicWithArticleById() {
        this.id = this.$route.params.id + ''
        console.log(this.id)
        if (this.id != null) {
          this.$fetch.apiTopic.getTopicWithArticleById({
            //查询参数
            id: this.id
          }).then(({data: data}) => {
            this.data = data
            this.getReviewerAddressByTopicId()
            this.getReviewerSexByTopicId()
            this.getKeywordByTopicId()
            this.getTopicCommentData()
            this.getTopicSentimentData()
          })
        }
      },
      getReviewerSexByTopicId() {
        this.$fetch.apiReviewer.getReviewerSexByTopicId({
          //查询参数
          topicId: this.id
        }).then(({data: data}) => {
          this.sexPieData = data
        })
      },
      getReviewerAddressByTopicId() {
        this.$fetch.apiReviewer.getReviewerAddressByTopicId({
          //查询参数
          topicId: this.id
        }).then(({data: data}) => {
          this.addressData = data
        })
      },
      getKeywordByTopicId() {
        this.$fetch.apiKeyword.getKeywordByTopicId({
          //查询参数
          topicId: this.id
        }).then(({data: data}) => {
          console.log(data)
          this.keywordData = data
          console.log(data.name)
          console.log(data.value)
        })
      },
      getTopicCommentData() {
        this.$fetch.apiComment.getTopicCommentData({
          //查询参数
          topicId: this.id
        }).then(({data: data}) => {
          this.commentData = data
        })
      },
      getTopicSentimentData() {
        this.$fetch.apiComment.getTopicSentimentData({
          //查询参数
          topicId: this.id
        }).then(({data: data}) => {
          this.sentimentData = data
        })
      },
      jumpToDetail(articleId) {
        this.$router.push({
          name: 'articleDetail',
          params: {articleId: articleId}
        })
      },
      dateFormat(dateTime) {
        if (dateTime == undefined) {
          return "";
        }
        return moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
      },
    },
  }
</script>

<style>
</style>
